<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<base href="../" />
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>用户管理-后台管理</title>
		<link href="css/bootstrap-cerulean.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			//js 事件驱动 ，基于事件的触发进行编程
			window.onload = function(){
				var datagrid = document.getElementById("datagrid");
				console.info(datagrid);
				
				//事件绑定方式二
//				datagrid.onclick = function(){
//					alert("click1");
//				}
//				
//				var click2 = function(){
//					alert("click2");
//				}
//				datagrid.onclick = click2;
			
				//事件绑定方式三
				datagrid.addEventListener("click",function(){
					alert("click1");
				});
				var click2 = function(){
					alert("click2");
				}
				datagrid.addEventListener("click",click2);
				
				//第一种绑定对应的解除绑定
//				datagrid.setAttribute("onclick","");
				
				//第二种绑定对应的解除绑定
//				datagrid.onclick = null;
				
				//第三种绑定对应的解除绑定
//				datagrid.removeEventListener("click",click2);
				
				
				console.info(document.getElementsByName("abc"));
				console.info(document.getElementsByTagName("nav"));
				console.info(document.getElementsByClassName("table"));
				console.info(document.querySelector("body > *"));
				console.info(document.querySelectorAll("body > div"));
				console.info(datagrid.querySelector("th"));
				console.info(datagrid.querySelectorAll("td"));
				console.info(document.querySelector("#datagrid"));
				
				var template = datagrid.children[0];
				template.remove();
				for(var i=0;i<10;i++){
					var tr = template.cloneNode(true);
					datagrid.appendChild(tr);
				}
				
			}
			
			//事件绑定方式一 onClick="abc()";
			var abc = function(){
				alert("add");
			}
			
			
//			function abc(){
//				
//			}
			//?=& #
			console.info(encodeURI("a=b&c=d"));
			console.info(encodeURI("a=中文&c=d"));
			console.info(encodeURIComponent("a=中文&c=d"));
		</script>
	</head>

	<body>
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
					<a class="navbar-brand" href="javascript:void(0);">后台管理</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">

						<li class="dropdown active">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统管理 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">用户管理</a>
								</li>
								<li>
									<a href="#">角色管理</a>
								</li>
							</ul>
						</li>

						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">文章中心 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">文章管理</a>
								</li>
								<li>
									<a href="#">文章类别管理</a>
								</li>
							</ul>
						</li>

						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">产品中心 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">产品管理</a>
								</li>
								<li>
									<a href="#">产品类别管理</a>
								</li>
							</ul>
						</li>
					</ul>

					<ul class="nav navbar-nav navbar-right">

						<li class="dropdown" style="position: relative;">
							<a style="padding-left: 50px;" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user-circle-o" style="font-size:30px; position: absolute; top:10px; left:10px"></i> 管理员：何东 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">修改个人信息</a>
								</li>
								<li>
									<a href="#">修改登录密码</a>
								</li>
								<li role="separator" class="divider"></li>
								<li>
									<a href="#">退出系统</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<div class="container">
			<ol class="breadcrumb">
				<li>
					<a href="#" name="abc">后台管理</a>
				</li>
				<li>
					<a href="#">系统管理</a>
				</li>
				<li class="active">用户管理</li>
			</ol>

			<div class="panel panel-primary">
				<!-- Default panel contents -->
				<div class="panel-heading">用户管理</div>
				<div class="panel-body">
					<form class="form-inline">
						<div class="form-group">
							<label class="sr-only" for="exampleInputEmail3">Email address</label>
							<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
						</div>
						<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
						<button onclick="abc();" type="button" class="btn btn-danger pull-right"><i class="fa fa-plus"></i></button>
					</form>
				</div>

				<!-- Table -->
				<table class="table table-bordered table-striped table-hover">
					<thead>
						<tr>
							<th>#</th>
							<th>First Name</th>
							<th>Last Name</th>
							<th>Username</th>
						</tr>
					</thead>
					<tbody id="datagrid">
						<tr>
							<th scope="row">1</th>
							<td>Mark</td>
							<td>Otto</td>
							<td>@mdo</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="text-center">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li>
							<a href="#" aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						<li>
							<a href="#">1</a>
						</li>
						<li>
							<a href="#">2</a>
						</li>
						<li>
							<a href="#">3</a>
						</li>
						<li>
							<a href="#">4</a>
						</li>
						<li>
							<a href="#">5</a>
						</li>
						<li>
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>

		<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<form action="admin/user-add.s" class="form-horizontal" method="post">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">添加用户</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label class="col-sm-3 control-label">用户名：</label>
								<div class="col-sm-9">
									<input type="text" required="required" pattern="^[a-zA-Z]\w{2,9}$" class="form-control" name="userName" placeholder="请输入3-10位的英文字符" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">密码：</label>
								<div class="col-sm-9">
									<input type="password" required="required" pattern="^.{3,10}$" class="form-control" name="userPwd" placeholder="请输入3-10位的密码" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">密码确认：</label>
								<div class="col-sm-9">
									<input type="password" required="required" pattern="^.{3,10}$" class="form-control" name="userPwdConfirm" placeholder="请输入3-10位的密码" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">角色：</label>
								<div class="col-sm-9">
									<select required="required" name="roleId" class="form-control">
										<option value="">请选择角色</option>
										<%
    		//List<RoleInfoVO> rs = (List<RoleInfoVO>)request.getAttribute("rs");
    		for(RoleInfoVO vo : rs){
    	%>
										<option value="<%=vo.getRoleId()%>">
											<%=vo.getRoleName() %>
										</option>
										<%} %>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">姓名：</label>
								<div class="col-sm-9">
									<input type="text" required="required" pattern="^[\u4e00-\u9fa5]{2,4}$" class="form-control" name="userRealName" placeholder="请输入2-4位的中文姓名" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">出生日期：</label>
								<div class="col-sm-9">
									<input type="text" required="required" pattern="^\d{4}-\d{1,2}-\d{1,2}$" class="form-control" name="userBirthdate" placeholder="请输入yyyy-MM-dd格式的日期" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">出生日期：</label>
								<div class="col-sm-9">
									<label class="checkbox-inline">
									  <input type="radio" value="true" name="userSex" checked="checked"/> 男
									</label>
									<label class="checkbox-inline">
									  <input type="radio" value="false" name="userSex" /> 女
									</label>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">电话：</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" name="userTel" placeholder="请输入电话" />
								</div>
							</div>							
							<div class="form-group">
								<label class="col-sm-3 control-label">qq：</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" name="userQq" placeholder="请输入qq号码" />
								</div>
							</div>							
							<div class="form-group">
								<label class="col-sm-3 control-label">身份号码：</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" name="userIdcard" placeholder="请输入身份号码" />
								</div>
							</div>					
							<div class="form-group">
								<label class="col-sm-3 control-label">家庭住址：</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" name="userAddress" placeholder="请输入家庭住址" />
								</div>
							</div>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary">添加用户</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>

</html>